import React, { Component, Fragment } from 'react';
import { citys, cityArea } from '../../utils/city';
import { Modal, Form, message, Upload, Button, Icon, Input, Select } from 'antd';
import styles from '../../routes/Program/MatterDetail.less';


// import reqwest from 'reqwest';

const FormItem = Form.Item;
const Option = Select.Option;
const cityArray = Object.keys(citys);
export default class UpdateOtaFile extends Component {
    state = {
        fileList: [],
        uploading: false,
    };

    handleUpload = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {

                //console.log('Received values of form: ', values);
                const { fileList, thumnaildata } = this.state;
                const params = values;
                fileList.forEach(file => {
                    params[file.name] = file;
                });

                this.setState({
                    uploading: true,
                });
                //console.log('uploadfileList', fileList, params);
                this.props.dispatch({
                    type: 'devupdate/uploadfile',
                    payload: params,
                    callback: () => {
                        this.setState({
                            fileList: [],
                            uploading: false,
                        });
                        this.props.handleModalVisible(false);
                        message.success('上传OTA文件成功！');


                    },
                });



            }
        });
    };

    render() {
        const uploadprops = {
            action: 'http://busiapiuat.topmediacloud.net/vehad/v1/uploadOtaFile',
            onRemove: file => {
                this.setState(({ fileList }) => {
                    const index = fileList.indexOf(file);
                    const newFileList = fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {
                this.setState(({ fileList }) => ({
                    fileList: [file],
                }));
                const tempfiletype = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
                return false;
            },
            fileList: this.state.fileList,
        };
        const { modalVisible, form, handleModalVisible } = this.props;
        const { uploading, type } = this.state;
        return (
            <Modal
                title="添加OTA升级文件"
                visible={modalVisible}
                onOk={this.handleUpload}
                onCancel={() => handleModalVisible(false)}
                footer={[
                    <Button key="cancel" onClick={() => handleModalVisible(false)}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        loading={uploading}
                        disabled={this.state.fileList.length === 0}
                        onClick={this.handleUpload}
                    >
                        {uploading ? '上传中...' : '添加'}
                    </Button>,
                ]}
            >
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文件类型">
                    {form.getFieldDecorator('otaType', {
                        rules: [{ required: true, message: '请输文件类型...' }],
                    })(
                        <Select onChange={this.handleCurrencyChange} style={{ width: 100 }}>
                            <Select.Option value={0}>测试版本</Select.Option>
                            <Select.Option value={1}>生产版本</Select.Option>

                        </Select>
                    )}
                </FormItem>
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="文件名">
                    {form.getFieldDecorator('fileName', {
                        rules: [{ required: true, message: '请输入文件名...' }],
                    })(<Input placeholder="文件名" />)}
                </FormItem>
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="版本说明">
                    {form.getFieldDecorator('verDescr', {
                        rules: [{ required: true, message: '请输入版本说明...' }],
                    })(<Input placeholder="文件名" />)}
                </FormItem>
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
                    {form.getFieldDecorator('remark', {
                        rules: [{ required: true, message: '请输入备注...' }],
                    })(<Input placeholder="文件备注" />)}
                </FormItem>


                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="选择文件">
                    <Upload {...uploadprops}>
                        <Button>
                            <Icon type="upload" /> 选择文件
                        </Button>
                    </Upload>

                </FormItem>
            </Modal>
        );
    }
}
